/**
* Created by czg on 2019/1/8 0008 Time: 11:53 .
*/

<template lang="html">
    <div class="food-container" v-wechat-title='$route.meta.title=this.title' img-set='none'>
        <div class="top-tab">
            <div class="menuTabs">
                <div class="childTab"  @click="showC">
                    <div :class="[isAlive1 ? 'isAlive1': '']">
                        <span>按类别</span>
                    </div>
                </div>
                <p class="line"></p>
                <div class="childTab" @click="showF">
                    <div :class="[isAlive2 ? 'isAlive2': '']">
                        <span>按楼层</span>
                    </div>
                </div>
            </div>
            <div class="container">
                <div style="margin-top: 50px;">
                    <food-class :list="foodClassList" v-if="isHide1" @toStoreInfo="toStoreInfo"></food-class>
                    <food-class :list="floorClassList" v-if="isHide2" @toStoreInfo="toStoreInfo"></food-class>
                    <!--<Back-top></Back-top>-->
                </div>
            </div>
            <!--<Tabs value="byClass" :capture-focus="true">-->
            <!--<TabPane :label="classLab" name="byClass" v-if="isHide1">-->
            <!--<div style="margin-top: 50px;">-->
            <!--<food-class :list="foodClassList" ></food-class>-->
            <!--&lt;!&ndash;<Back-top></Back-top>&ndash;&gt;-->
            <!--</div>-->
            <!--</TabPane>-->
            <!--<TabPane :label="floorLab" name="byFloor" v-if="isHide2">-->
            <!--<div style="margin-top: 50px;">-->
            <!--&lt;!&ndash;<Back-top></Back-top>&ndash;&gt;-->
            <!--<food-class :list="floorClassList" ></food-class>-->
            <!--</div>-->
            <!--</TabPane>-->
            <!--</Tabs>-->
        </div>
        <div class="mask" v-if="showMask" @click="mHide"></div>
        <div class="menuClass">
            <div class="childMC" v-if="showCmenu" v-for="(item,index) in cList" :key="index" @click="toChildClass(item.business2_id,index)" :class="[activeIndex1 == index?'isAlive':'']"><span>{{item.business2_name}}</span></div>
        </div>
        <div class="menuClass">
            <div class="childMC" v-if="showFmenu" v-for="(item, index) in floorMList" :key="index" @click="toChildFloor(item,index)" :class="[activeIndex2 == index?'isAlive':'']"><span>{{item}}</span></div>
        </div>
        <loading v-if="loadingMore"></loading>
    </div>
</template>
<script>
  import FoodClass from '../components/foodClass'
  import axios from 'axios'
  import Scroll from 'iview/src/components/scroll/scroll'
  import Loading from '../components/loading'
  export default {
    name: 'food',
    components: {Loading, Scroll, FoodClass},
    created () {
      this.type = this.$route.query.type
      this.title = this.$route.query.title
      this.getFloorList()
      this.getFirst()
    },
    methods: {
      getFirst () {
        console.log(this.type,1)
        this.loadingMore = true
        axios.get('https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/shopList' + '?type=' + this.type).then(res => {
          this.foodClassList = res.data.result
          this.floorClassList = res.data.result
          this.loadingMore = false
          console.log(this.foodClassList)
        })
      },
      getFloorList () {
        axios.get('https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/floorList'+ '?type=' + this.type).then(res => {
          this.foodMList = res.data.result.type
          this.floorMList = res.data.result.floor
          const index = this.foodMList.findIndex(item => item.business1_id == this.type)
          this.cList = this.foodMList[index].business_sub
          console.log(this.cList)
        })
      },
      toChildClass (id,index) {
        this.classID = id
        this.loadingMore = true
        this.activeIndex1 = index
        this.activeIndex2 = -1
        console.log(id)
        //接口正常后记得把'0000201'改回 this.classID
        axios.get('https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/shopList'+ '?type=' + this.type +'&business_sub='+ this.classID).then(res => {
          this.foodClassList = res.data.result
          this.loadingMore = false
        })
        this.isHide1 = true
        this.isHide2 = false
        this.showCmenu = false
        this.showMask = false
      },
      toChildFloor(item,index) {
        this.floor = item
        this.loadingMore = true
        this.activeIndex2 = index
        this.activeIndex1 = -1
        this.showFmenu = false
        axios.get('https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/shopList'+ '?type=' + this.type +'&floor='+ this.floor).then(res => {
          this.floorClassList = res.data.result
          this.loadingMore = false
          if(this.floorClassList.length === 0) {
          }
        })
        this.isHide1 = false
        this.isHide2 = true
        this.showFmenu = false
        this.showMask = false
      },
      toStoreInfo(code){
        console.log(code)
        this.$router.push({
          path: '/storeInfo',
          query: {
            store_code: code
          }
        })
      },
      showC(){
        this.isAlive1 = true
        this.isAlive2 = false
        this.showCmenu = true
        this.showFmenu = false
        this.showMask = true
      },
      showF(){
        this.isAlive1 = false
        this.isAlive2 = true
        this.showFmenu = true
        this.showCmenu = false
        this.showMask = true
      },
      mHide () {
        this.showFmenu = false
        this.showCmenu = false
        this.showMask = false
      }
    },
    data () {
      return {
        title: '',
        loadingMore: false,
        activeIndex1: -1,
        activeIndex2: -1,
        classID: '',
        floor: '',
        isAlive: false,
        isAlive1: true,
        isAlive2: false,
        isHide1: true,
        isHide2: false,
        showCmenu: false,
        showFmenu: false,
        showMask: false,
        fullHeight: 0,
        cList: [],
        fList: [],
        foodClassList: [],
        floorClassList: [],
        foodMList: [],
        floorMList: [],
        classLab: (h, prarms) => {
          return h('div', [
            // h('span', '按类别'),
            h('span',{
              style: {
                width: '100%',
                height: '100%',
                display: 'block'
              },
              on: {
                click: () => {
                  this.showC()
                }
              }
            }, '按类别')
          ])
        },
        floorLab: (h) => {
          return h('div', [
            h('span',{
              style: {
                width: '100%',
                height: '100%',
                display: 'block'
              },
              on: {
                click: () => {
                  this.showF()
                }
              }
            },  '按楼层'),
            h('p', '')
          ])
        }
      }
    }
  }
</script>

<style lang="less">
    .food-container{
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background-color: #f4f6fb;
    .menuTabs{
        width: 100%;
        height: 40px;
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
    }
    .menuTabs .childTab{
        display: block;
        width: 50%;
        height: 100%;
        font-size: 18px;
        text-align: center;
        line-height: 40px;
        color: #b4b4b4;
    }
    .isAlive{
        border: 1px solid #b2835b;
    }
    .isAlive1{
        color: #b2835b;
        border-bottom: 2px solid #b2835b;
    }
    .isAlive2{
        color: #b2835b;
        border-bottom: 2px solid #b2835b;
    }
    .line{
        content: '';
        height: 24px;
        width:1px;
        background: #b4b4b4;
        display: inline-block;
        vertical-align: middle;
    }
    .menuClass{
        position: fixed;
        z-index: 100;
        width: 100%;
        top: 42px;
        background-color: #f4f6fb;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 3%;
        padding-bottom: 1%;
    }
    .menuClass .childMC{
        width: 47%;
        padding: 2%;
        margin:1.5%;
        background-color: #fff;
        font-size: 16px;
        color: #b2835b;
    }
    .mask{
        position: fixed;
        top: 42px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0, 0.8);
        z-index: 99;
    }
    }
</style>
